@mixin translate($x:-50%, $y:-50%){
  -webkit-transform: translate($x,$y);
      -ms-transform: translate($x,$y);
          transform: translate($x,$y);
}

// 绝对定位居中
// - $direction 默认center时居中，可选horizontal:水平居中，vertical：垂直居中
// - $value 只当$direction不为center时起作用，可传入数值单位，horizontal时为top:$value，vertical时为left:$value
// - $reverse 传入true时，改变$value的方向
@mixin center($direction:center, $value:0, $reverse: false){
  position: absolute;
  @if $direction == horizontal{
    @if $reverse == true{
      bottom: $value;
    }
    @else{
      top: $value;
    }
    left: 50%;
    @include translate(-50% , 0);
  }
  @else if $direction == vertical{
    top: 50%;
    @if $reverse == true{
      right: $value;
    }
    @else{
      left: $value;
    }
    @include translate(0 , -50%);
  }
  @else{
    top: 50%;
    left: 50%;
    @include translate;
  }
}
